<template>
  <a-card :bordered="false">
    <div class="dashboard">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :xl="4" :lg="7" :md="8" :sm="24">
              <a-form-item label="产线">
                <j-dict-select-tag type="list" v-model="param.line" dictCode="mes_line_cfg,LINE,LINE"
                                   placeholder="请选择产线或产线组" />
              </a-form-item>
            </a-col>
            <a-col :xl="4" :lg="7" :md="4" :sm="4">
              <a-form-item label="查询维度">
                <j-dict-select-tag placeholder="请选择查询维度" v-model="param.dimension" dictCode="time_dimension"
                                   @change="dimensionChange" />
              </a-form-item>
            </a-col>
            <template v-if="toggleSearchStatus">
              <a-col :xl="4" :lg="7" :md="8" :sm="24">
                <a-form-item label="查询时间">
                  <j-date placeholder="查询时间" v-model="param.tDate" :showTime="true"
                          dateFormat="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
            </template>
            <template v-else>
              <a-col :xl="4" :lg="7" :md="8" :sm="24">
                <a-form-item label="开始时间">
                  <j-date placeholder="开始时间" v-model="param.sDate" :showTime="true"
                          dateFormat="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :xl="4" :lg="7" :md="8" :sm="24">
                <a-form-item label="结束时间">
                  <j-date placeholder="结束时间" v-model="param.eDate" :showTime="true"
                          dateFormat="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
            </template>

            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchSpcData(param)" icon="search">查询</a-button>
              <a-button type="primary" @click="reset()" icon="reload"
                        style="margin-left: 8px">重置</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
      <!-- table区域-begin -->
      <div class="chart">
        <a-tabs defaultActiveKey="1">
          <a-tab-pane tab="时间利用率" key="1">
            <div id="valueTrend" style="height: 350px;width: 100%"></div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </a-card>
</template>

<script>

import { downFile, getAction, httpAction, postAction } from '@api/manage'
let echarts = require('echarts')

export default {
  name: 'AvailabilityReport',
  components: {
  },
  data() {
    return {
      description: '时间利用率',
      param: {},
      //工站下拉列表
      opOptions: [],
      controlValues:[],
      controlX:[],
      controlVal:[],
      //是否展开
      toggleSearchStatus: false,
      normalData: null,
      //spc配置项查询参数
      spcCfgParam: {},
      columns: [],
      url: {
        getAvailabilityList: '/report/availability/getAvailability'
      }
    }
  },
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.chartInit()
    this.initValueTrendChart()
    //window.addEventListener('resize', this.handleWindowResize)
  },
  methods: {
    chartInit() {
      this.valueTrendChart = echarts.init(document.getElementById('valueTrend'))
    },
    /**
     * 初始化控制图
     */
    initValueTrendChart() {
      let that = this
      let startLength = 100 - (50 / that.controlValues.length * 100)
      // 指定图表的配置项和数据
      this.valueTrendOption = {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,  //鼠标移入抖动
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          position: 'left'
        },
        grid: {
          left: '5%',
          right: '5%'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: this.controlX,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          position: "left",
          offset: 7,
          axisLabel: {
            color: '#000000',
            fontSize: this.transformFontSize(15)
          },
          // axisLine: {
          //   show: false,
          //   lineStyle: {
          //     color: '#fff'
          //   }
          // },
          splitLine: {                                //网格线
            show: true,                                  //是否显示
            lineStyle: {                                //网格线样式
              color: '#9AA5A0FF',                        //网格线颜色
              width: 1,                                //网格线的加粗程度
              type: 'dashed'                            //网格线类型
            }
          }
        },

        dataZoom: [
          {
            type: 'inside',
            start: startLength,
            end: 100
          },
          {
            start: 0,
            end: 20
          }
        ],
        series: [
          {
            name: '时间利用率',
            type: 'bar',
            barWidth: '30%',
            label: {
              show: true,
              formatter: function(param) {
                return param.value + '%'
              },
              position: 'top',
              textStyle: {
                fontSize: this.transformFontSize(15)
              }
            },
            data: this.controlVal
          },
          {
            name: '时间利用率',
            type: 'line',
            data: this.controlVal
          }

        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.valueTrendOption && this.valueTrendChart.setOption(this.valueTrendOption)
      const myEvent = new Event('resize')
      window.dispatchEvent(myEvent)
    },
    transformFontSize(fontsize) {
      const width = window.screen.width
      const ratio = width / 1920
      return parseInt(fontsize * ratio)
    },
    handleWindowResize() {
      this.valueTrendChart.resize()
    },
    reset(){
      this.param ={}
    },
    //根据查询维度改变日期范围
    dimensionChange(val) {
      this.toggleSearchStatus = val === 'hour';
    },
    searchSpcData() {
      console.log('查询')
      const that = this
      if (that.param) {
        getAction(this.url.getAvailabilityList, this.param).then((res) => {
          if (res.code === 200) {
            this.controlX=[]
            this.controlVal=[]
            let controlValues = res.result
            controlValues.map(item=>{
              this.controlX.push(item.name)
              this.controlVal.push(item.value)
            })
            this.initValueTrendChart();
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {
          that.confirmLoading = false
        })
      }
    }
  }
}
</script>

<style scoped>
</style>